<template>
  <div>
    <br />
    <div>
      <i class="el-icon-paperclip" style="margin-left: 10px;"/>
      <span> 消费管理</span>
    </div>
    <el-card style="width: 98%; margin-left: 10px;">
      <br />
      <el-row>
        <el-col :span="20">
          <el-alert style="width: 70%;margin-left: 240px;"
            :title="title" type="success"
            center :closable="false">
          </el-alert>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-shopping-cart-full" size="medium" 
          style="margin-left: 50px;" @click="consumeBtn">会员卡消费</el-button>
        </el-col>
      </el-row>
      <br />
      <el-table :data="consumeList" height="580"
      row-key="id" :default-expand-all=true
      :default-sort = "{prop: 'date', order: 'descending'}"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      :row-class-name="tableClass"
      style="width: 98%;margin-left: 15px;margin-top: 20px;">
        <el-table-column prop="date" label="日期" width="220px"></el-table-column>
        <el-table-column prop="dealId" label="交易单号" width="200px"></el-table-column>
        <el-table-column prop="cardId" label="会员卡号" width="200px"></el-table-column>
        <el-table-column prop="userName" label="会员姓名" width="180px"></el-table-column>
        <el-table-column prop="movieName" label="电影名" width="220px">
          <template slot-scope="scope">
            <span v-if="scope.row.children===null" style="color: black">《 {{scope.row.movieName}} 》</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="售出票数" width="120px"></el-table-column>
        <el-table-column prop="money" label="交易金额" width="140px">
          <template slot-scope="scope">
            <span v-if="scope.row.children===null" style="color: saddlebrown;">￥</span>
            <span v-text="scope.row.money" style="color: saddlebrown;"></span>
          </template>
        </el-table-column>
        <el-table-column prop="dealTime" label="消费时间" width="250px"></el-table-column>
      </el-table>
      <br />
    </el-card>

    <!-- 会员卡消费对话框 -->
    <el-dialog title="会员卡消费" :visible.sync="consumeDialog" width="40%" @close="closeConsumeDialog">
      <el-form :model="cardForm" :rules="cardRules" ref="cardFormRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="会员卡号" prop="id" style="width: 90%;">
              <el-cascader v-model="cardForm.id" :options="userList" :props="props" filterable
              :show-all-levels="false" @change="changeMoney"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员卡余额" prop="money" style="width: 90%;">
              <el-input v-model="cardForm.money" readonly @focus="warning"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="movieForm" :rules="movieRules" ref="movieFormRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订购电影" prop="id">
              <el-select v-model="movieForm.id" filterable  @change="getMovie">
                <el-option v-for="movie in movieList" :key="movie.id" :label="movie.name" :value="movie.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订购票数" prop="num">
              <el-input-number v-model="movieForm.num" @change="handleChange" :min="1">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电影价格" prop="price" style="width: 90%;">
              <el-input v-model="movieForm.price" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电影积分" prop="integral" style="width: 90%;">
              <el-input v-model="movieForm.integral" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付金额" prop="moneySum" style="width: 90%">
              <el-input v-model="movieForm.moneySum" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="获取积分" prop="integralSum" style="width: 90%">
              <el-input v-model="movieForm.integralSum" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="consumeDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveConsume">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    created(){
      this.getUserAndCard()
      this.getCardList()
      this.getMovieList()
      this.getConsumeList()
    },
    data(){
      return{
        title:'您 好 ， 欢 迎 进 入 消 费 管 理 界 面 ！',
        userList:[],
        cardList:[],
        movieList:[],
        consumeList:[],
        consumeDialog:false,
        movieForm:{
          id: null,
          num: 1
        },
        cardForm:{
          money:null
        },
        //定义级联选择项
        props: {
          //定义子节点菜单展开方式
          expandTrigger: "hover",
          value: "userName", //选中数据的value值
          label: "userName", //选中数据展现名称
          children: "children" ,//自选项数据
          emitPath: false    //只获取最后一个节点的值
        },
        cardRules: {
          id: [{
            required: true,
            message: '请选择会员卡',
            trigger: 'blur'
          }],
          money: [{
              required: true,
              message: '会员卡余额不能为空',
              trigger: 'blur'
            }
          ]
        },
        movieRules: {
          id: [{
            required: true,
            message: '请选择要订购的电影',
            trigger: 'blur'
          }],
          num: [{
            required: true,
            message: '请选择订购票数',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '电影价格不能为空',
            trigger: 'blur'
          }],
          integral: [{
            required: true,
            message: '电影积分不能为空',
            trigger: 'blur'
          }],
          moneySum: [{
            required: true,
            message: '支付金额不能为空',
            trigger: 'blur'
          }],
          integralSum: [{
            required: true,
            message: '获取积分不能为空',
            trigger: 'blur'
          }],
        }
      }
    },
    methods:{
      async getUserAndCard(){
        const {data: result} =await this.$http.get(`user/getUserAndCard`)
        this.userList=result.data
      },
      async getCardList(){
        const {data: result} =await this.$http.get(`card/list?query=`+'')
        this.cardList=result.data
      },
      async getMovieList() {
        const {
          data: result
        } = await this.$http.get('/movie/getMovieList')
        this.movieList = result.data
      },
      async getConsumeList(){
        const {data: result} =await this.$http.get(`consume/getConsumeList`)
        this.consumeList=result.data
      },
      tableClass({row}) {
        if (row.children !== null) {
          return 'primary-row'
        }
        return ''
      },
      closeConsumeDialog(){
        this.$refs.cardFormRef.resetFields()
        this.$refs.movieFormRef.resetFields()
        this.cardForm={
          money:null
        }
        this.movieForm = {
          id: null,
          num: 1
        }
      },
      warning() {
        this.$notify.warning({
          title: '注意',
          dangerouslyUseHTMLString: true,
          message: '<div>会员卡余额无需手动输入</div><div>选择会员卡后，余额会自动显示</div>',
          offset: 100
        });
      },
      changeMoney(id){
        this.$refs.cardFormRef.resetFields()
        this.cardForm.id=id
        for(let card of this.cardList){
          if(this.cardForm.id===card.id){
            this.cardForm.money=card.money
            this.cardForm.integral=card.integral
            break
          }
        }
      },
      async getMovie(id) {
        let num = this.movieForm.num
        const {
          data: result
        } = await this.$http.get('/movie/getMovie?id=' + id)
        this.movieForm = result.data
        this.movieForm.moneySum = this.movieForm.price * num
        this.movieForm.integralSum = this.movieForm.integral * num
        this.movieForm.num = num
        this.$refs.movieFormRef.resetFields()
      },
      handleChange(num) {
        if (this.movieForm.id !== null) {
          this.movieForm.moneySum = this.movieForm.price * num
          this.movieForm.integralSum = this.movieForm.integral * num
        }
      },
      consumeBtn(){
        this.consumeDialog=true
      },
      async saveConsume(){
        this.$refs.cardFormRef.validate(async valid1 => {
          this.$refs.movieFormRef.validate(async valid2 => {
            //如果校验失败 则停止数据
            if (!valid1||!valid2) return
            if (this.cardForm.money < this.movieForm.price * this.movieForm.num) {
              this.$message.error("会员卡余额不足，无法进行消费!")
              return
            }
            let form = {
              card: this.cardForm,
              movie: this.movieForm
            }
            const {data: result} =await this.$http.put(`card/updateCard`,form)
            if(result.status !== 200 ) return this.$message.error("会员消费失败!")
            // this.$message.success("会员卡消费成功!")
            this.title=`消 费 成 功 ！ ${this.cardForm.id} 会 员 卡 已 购 买 电 影 《 ${this.movieForm.name} 》 ！`
            this.getCardList()
            this.getConsumeList()
            this.consumeDialog=false
          })
        })
      }
    }
  }
</script>

<style>
  .el-table .primary-row {
    background: #f4f7f9;
  }
</style>
